﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>常见可视化效果</title>
</head>
<body>
    <div>
        <p id="p1">Click me to show and hide</p>
        <img id="img1" src="images/android.png" width="80" height="80" />
    </div>
    <div>
        <p id="p2">Click me to toggle showing and hidding</p>
        <img id="img2" src="images/apple.png" width="80" height="80" />
    </div>
    <div>
        <p id="p3">Click me to fadeout and fadein</p>
        <img id="img3" src="images/dotnet.png" width="80" height="80" />
    </div>
    <div>
        <p id="p4">Click me to slideup and slidedown</p>
        <img id="img4" src="images/java.png" width="80" height="80" />
    </div>
    <div>
        <p id="p5">Click me to partially fadein</p>
        <img id="img5" src="images/cloud.png" width="80" height="80" />
    </div>
    <div>
        <p id="p6">Click me to make customized animation.</p>
        <span id="spn">This is an animation text!</span>
    </div>

    <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#p1').click(showandhide);
            $('#p2').click(toggleShow);
            $('#p3').click(fadeShow);
            $('#p4').click(slideShow);
            $('#p5').click(partiallyFade);
            $('#p6').click(customAnimate);
        });
        function showandhide() {
            $('#img1').hide(2000, function () {
                $('#img1').show(2000, function () {
                    $('#img1').css("border", "solid 1px red");
                });
            });
        }
        function toggleShow() {
            $('#img2').toggle(1000);
        }
        function fadeShow() {
            $('#img3').fadeToggle(1000);
        }
        function slideShow() {
            $('#img4').slideToggle(1000);
        }
        function partiallyFade() {
            $('#img5').fadeTo(1000, 0.333);
        }
        function customAnimate() {
            $('#spn').animate(
                {
                    fontSize: "24px",
                    fontWeight: "900"
                },
                2000);
        }
    </script>
</body>
</html>
